<template>
  <div class="app-container">
    <el-row type="flex" justify="space-between" style="margin-top:20px">
       <el-col>
         <h3>医生信息</h3>
       </el-col>
       <el-col>
         <el-button type="primary" @click="doctorShow1">添加</el-button>
       </el-col>
    </el-row>
    <el-table
      :data="dactors"
      border
      :header-cell-style="{'text-align':'center'}"
      :cell-style="{'text-align':'center'}"
      style="width: 100%">
      <el-table-column
        prop="userName"
        label="医生姓名"
        >
      </el-table-column>
       <el-table-column
        prop="phoneNum"
        label="医生手机号"
        >
      </el-table-column>
      <el-table-column
        prop="depName"
        label="所在科室">
      </el-table-column>
      <el-table-column
        prop="remarks"
        label="医生简介">
      </el-table-column>
       <!-- <el-table-column
        label="操作">
        <el-link type='danger'>删除</el-link>
      </el-table-column> -->
    </el-table>
     <Pagination
        :total='total_count'
        :currentPage='currentPage'
        :pageSize='pageSize'
        @handleSizeChange="pageSizeChange"
        @handleCurrentChange="currentPageChange"
        style="margin-top:20px"
     />

     <!-- 添加医生信息 -->
     <el-dialog
        title="添加医生信息"
        :visible.sync="doctorShow"
        width="30%">
       <el-form ref="doctorForm" :model='form' :rules="formRule">
         <el-form-item label="手机号：" prop="phoneNum">
           <el-input  v-model="form.phoneNum" placeholder="请输入手机号"></el-input>
         </el-form-item>
         <el-form-item label="密码：">
            <el-input  type="password" v-model="form.password" placeholder="请输入密码"></el-input>
         </el-form-item>
       </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="doctorShow = false">取 消</el-button>
          <el-button type="primary" @click="addDoctor">确 定</el-button>
        </span>
      </el-dialog>
  </div>
</template>

<script>
import { validPhone } from '@/utils/validate'
import Pagination from '@/components/Form/Pagination.vue'
// import RecommmendedDoctor from './recommendedDoctor.vue'
import { getAllDepName,getAllDoctor,addDoctor } from '@/api/user'
export default {
  components: {
    // RecommmendedDoctor,
    Pagination
  },
  data() {
    const validatePhone = (rule, value, callback) => {
      validPhone(value) ? callback() : callback('账号格式不正确')
    }
    return {
      form: {
        phoneNum: '',
        password: ''
      },
      formRule:{
        phoneNum:[
          {required:true,trigger:'blur',message:'请输入手机号'},
          { validator: validatePhone, trigger: 'blur' }
        ]
      },
      doctorShow: false,
      currentPage:1,//当前选中页
      total_count:10,//总页数
      pageSize:10,//分页条数
      options:[], // 所有科室信息
      dactors:[], // 所有医生信息
    }
  },
  mounted(){
    this.getAllDepName()
    this.getAllDoctor()
  },
  methods: {
     // pageSize分页条数改变
      pageSizeChange(size){
         this.pageSize = size
      },
      // 当前页数改变
      currentPageChange(page){
         this.currentPage = page
      },
       // 所有科室信息
    async getAllDepName(){
      this.options = await getAllDepName()
    },
    // 获取所有医生信息
    async getAllDoctor(){
      const { records,total,size,pages } = await getAllDoctor() 
      this.dactors = records
      this.total_count = total
    },
    // 添加医生信息
    doctorShow1(){
        this.doctorShow = true
        this.getAllDoctor()
    },
    addDoctor(){
       this.$refs.doctorForm.validate(async isOk => {
          if(isOk){
             try {
               await addDoctor(this.form)
               this.getAllDoctor()
               this.$message.success('添加成功')
               this.doctorShow = false
             } catch (error) {
               this.$message.error(`${error},请换一个手机号`)
             }
          }
        })
        // this.$message.success('添加成功')
    }
  }
}
</script>

<style>

</style>
